import { useReducer } from 'react'

const counterReducer = (state = { value: 0 }, { type, payload = 1 }) => {
	switch (type) {
		case 'ADD':
			return { value: state.value + payload }
		case 'MINUS':
			return { value: state.value - payload }
		default:
			return state
	}
}

export default function UseReducerPage(props) {
	const [state, dispatch] = useReducer(counterReducer, { value: 0 })

	console.log('state', state) //sy-log

	const add2 = () => {
		dispatch(() => {
			console.log('触发重渲染')
		})
	}
	return (
		<div>
			<h3>UseReducer</h3>
			<p>{state.value}</p>
			<button onClick={() => dispatch({ type: 'ADD' })}>add</button>
			<button onClick={add2}>add2</button>
		</div>
	)
}
